<template>
  <div class="heard">
    <!-- 搜索 -->

    <div class="search">
      <van-search
        background="none"
        show-action
        label="上海"
        @click="$router.push('/listcities')"
        placeholder="请输入小区或地区"
      >
        <template #action>
          <div>
            <van-icon name="location-o" size="25" />
          </div>
        </template>
      </van-search>
    </div>

    <!-- 轮播图 -->

    <div class="swiper">
      <van-swipe :autoplay="2000">
        <van-swipe-item v-for="image in images" :key="image.id">
          <img v-lazy="'http://liufusong.top:8080' + image.imgSrc" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-grid class="ys">
      <van-grid-item icon="wap-home-o" text="整租" class="tubiao"/>
      <van-grid-item
        icon="friends-o
"     class="tubiao"
        text="合租"
      />
      <van-grid-item icon="browsing-history-o" text="地图找房" @click="clickfn1" class="tubiao"/>
      <van-grid-item icon="shop-collect-o" text="去出租" @click="clickfn" class="tubiao"/>
    </van-grid>
    <div> <van-cell title="租房小组" value="更多" /></div>
    <van-grid direction="horizontal" :column-num="2" :gutter="10">
      <van-grid-item
        icon="photo-o"
        text="家住回龙观

归属的感觉"
      />
      <van-grid-item icon="photo-o" text="宜居四五环

大都市生活" />
      <van-grid-item icon="photo-o" text="喧嚣三里屯

繁华的背后" />
      <van-grid-item icon="photo-o" text="比邻十号线

地铁心连心" />
    </van-grid>
  </div>

  <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>jintai</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>gg</van-swipe-item>
</van-swipe> -->
</template>

<script>
import { getimg } from '@/api/home'
import { getToken } from '@/utils/storage'
export default {
  data () {
    return {
      images: []
    }
  },
  methods: {
    clickfn () {
      if (getToken()) {
        this.$router.push('/gorent')
      } else {
        this.$router.push('/login')
      }
    },
    clickfn1 () {
      if (getToken()) {
        this.$router.push('/maphouse')
      } else {
        this.$router.push('/login')
      }
    }
  },
  async created () {
    const { body } = await getimg()
    // console.log(body.imgSrc)
    this.images = body
  }
}
</script>

<style lang="less" scoped>
.heard {
  .swiper {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    visibility: visible;
    img {
      width: 100%;
      height: 212px;
    }
  }
  .search {
    transform: translatey(-20%);
    position: absolute;
    top: 25px;
    width: 100%;
    padding: 0 10px;
    font-size: 14px;
    z-index: 2;
    box-sizing: border-box;
    align-items: center;
  }
  .ys {
    padding: 10px 0;
  }
  .tubiao{
    color: #22b97a;
  }
}
</style>
